<template>
  <div class="box">
    <!-- 筛选导航栏! -->
    <el-form style="text-align: left" :inline="true">
      <el-form-item label="用户">
        <el-input
          v-model="form.username"
          placeholder="请输入要查询的用户"
        ></el-input>
      </el-form-item>
      <el-form-item label="业务类型:">
        <el-select
          v-model="form.businessType"
          placeholder="请选择需要查询的业务类型"
        >
          <el-option
            v-for="item in options"
            :key="item.itemText"
            :label="item.description"
            :value="item.itemText"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="帐目类型:">
        <el-select
          v-model="form.typeName"
          placeholder="请选择需要查询的帐目类型"
        >
          <el-option
            v-for="item in accountsType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchData">搜索</el-button>
        <el-button type="danger" @click="emptyData">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表展示栏! -->
    <el-table :data="dataList" border stripe style="width: 100%">
      <el-table-column
        label="序号"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="typeName"
        label="账目类型"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="businessTypeName"
        label="业务类型"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="integral"
        label="积分"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="totalIntegral"
        label="总积分"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <!-- 分页导航栏! -->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="form.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getIntegral,
  getPermType, //查询业务类型!
} from "../../assets/js/api";
export default {
  data() {
    return {
      form: {
        username: "",
        pageNo: 1,
        pageSize: 10,
        businessType: null,
        typeName: null,
      },
      currentPage: 1,
      dataList: [],
      options: [], //业务类型!
      accountsType: [
        {
          value: 0,
          label: "支出",
        },
        {
          value: 1,
          label: "收入",
        },
      ], //账目类型!
      total: null,
    };
  },
  created() {
    this.getintegralList();
    this.getPermType();
  },
  methods: {
    //获取商品信息列表!
    async getintegralList() {
      // debugger;
      //查询table表格数据!
      await getIntegral(this.form).then((res) => {
        this.dataList = res.data.records;
        this.total = res.data.total;
      });
    },
    getPermType() {
      //查询筛选框业务类型数据!
      getPermType("integral_type").then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].itemText = Number(res.data[i].itemText);
          this.options.push(res.data[i]);
        }
      });
    },
    // 搜索按钮!
    searchData() {
      this.form.pageNo = 1;
      // this.options = [];
      this.getintegralList();
    },
    // 清空按钮!
    emptyData() {
      this.form.username = "";
      this.form.typeName = null;
      this.form.businessType = null;
      // this.options = [];
      this.getintegralList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.form.pageNo = cpage;
      // this.options = [];
      this.getintegralList();
    },
    handleSizeChange(psize) {
      // this.options = [];
      this.form.pageSize = psize;
      this.getintegralList();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding: 20px;
  background-color: #fff;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
.buttonNavigation {
  text-align: left;
  margin-bottom: 10px;
}
</style>